Skip to main content
menu_icon.png

Everything you need to learn Optimizely X in one place: See our resource pages for Web Experimentation and Personalization.

x
Optimizely Knowledge Base

Move variation code to CSS in Optimizely X

relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization

THIS ARTICLE WILL HELP YOU:
  • Fix flashing or flickering variation content on your website
  • Streamline visual changes so they run immediately

The Optimizely X Web Editor usually serves experiments and campaigns without any visual hiccups, but you may occasionally encounter an issue with flashing or flickering content: when the original page appears briefly before your variation.

Optimizely's variation code waits for an element to be available in order to make a visual change. The code runs from top to bottom, and blocks changes to the elements below it as it waits. If you have a large number of visual changes in your variation code, you may see flashing.

One way to streamline your visual changes and reduce flashing is to move the visual changes to CSS.

CSS in the Variation Code Editor

The CSS in the Variation Code Editor runs immediately when it's set to synchronous timing. It applies only to the variation you're editing. 

Here's where to find it: 

  1. Navigate to the Editor. Click the Variation Code Editor icon (). 

  2. Click CSS to write CSS for this variation.