[{"data":1,"prerenderedAt":408},["ShallowReactive",2],{"blog-list":3},[4,119],{"_path":5,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":9,"description":8,"createdAt":10,"publish":11,"tags":12,"body":17,"_type":113,"_id":114,"_source":115,"_file":116,"_stem":117,"_extension":118},"/articles/safari-inline-block-fix-for-columns-layout","articles",false,"","Safari inline-block fix for CSS columns layout","04/11/2023",true,[13,14,15,16],"css","safari","issue","fix",{"type":18,"children":19,"toc":107},"root",[20,42,55],{"type":21,"tag":22,"props":23,"children":27},"element","div",{"className":24},[25,26],"l-wrap","l-wrap--700",[28,36],{"type":21,"tag":29,"props":30,"children":32},"h2",{"id":31},"the-problem",[33],{"type":34,"value":35},"text","The problem",{"type":21,"tag":37,"props":38,"children":39},"p",{},[40],{"type":34,"value":41},"Using css columns property gives us different results for Chrome and Safari. Check below gif file.",{"type":21,"tag":22,"props":43,"children":46},{"className":44},[25,45],"l-wrap--md",[47],{"type":21,"tag":48,"props":49,"children":54},"markdown-image",{"src":50,"alt":51,"className":52},"article-images/safari-inline-block-issue.gif","Safari inline-block issue",[53],"u-my-32",[],{"type":21,"tag":22,"props":56,"children":58},{"className":57},[25,26],[59,72,78,83,89],{"type":21,"tag":37,"props":60,"children":61},{},[62,64,70],{"type":34,"value":63},"Look closely to the above gif file and you'll see the border positions differently if we toggle ",{"type":21,"tag":65,"props":66,"children":67},"code",{},[68],{"type":34,"value":69},"display: inline-block",{"type":34,"value":71}," rule. In this case, border-bottom for last child of the left column goes above the first child of the right column. This issue only occurs in Safari browser.",{"type":21,"tag":29,"props":73,"children":75},{"id":74},"the-finding",[76],{"type":34,"value":77},"The finding",{"type":21,"tag":37,"props":79,"children":80},{},[81],{"type":34,"value":82},"Border bottom works incorrectly in Safari while using CSS columns for layout.",{"type":21,"tag":29,"props":84,"children":86},{"id":85},"the-fix",[87],{"type":34,"value":88},"The fix",{"type":21,"tag":37,"props":90,"children":91},{},[92,94,98,100,105],{"type":34,"value":93},"Use ",{"type":21,"tag":65,"props":95,"children":96},{},[97],{"type":34,"value":69},{"type":34,"value":99}," along with the ",{"type":21,"tag":65,"props":101,"children":102},{},[103],{"type":34,"value":104},"border-bottom",{"type":34,"value":106}," rule.",{"title":8,"searchDepth":108,"depth":108,"links":109},2,[110,111,112],{"id":31,"depth":108,"text":35},{"id":74,"depth":108,"text":77},{"id":85,"depth":108,"text":88},"markdown","content:articles:safari-inline-block-fix-for-columns-layout.md","content","articles/safari-inline-block-fix-for-columns-layout.md","articles/safari-inline-block-fix-for-columns-layout","md",{"_path":120,"_dir":6,"_draft":7,"_partial":7,"_locale":8,"title":121,"description":8,"createdAt":122,"publish":11,"tags":123,"body":128,"_type":113,"_id":405,"_source":115,"_file":406,"_stem":407,"_extension":118},"/articles/how-to-preview-experiments-in-webtrends-optimize","How to preview experiments in Webtrends Optimize","02/03/2026",[124,125,126,127],"CRO","A/B Testing","Experimentation","Webtrends Optimize",{"type":18,"children":129,"toc":397},[130],{"type":21,"tag":22,"props":131,"children":133},{"className":132},[25,26],[134,140,177,183,222,231,237,286,297,309,315,329,334,339,346,351,358,363,368,374,379,385],{"type":21,"tag":29,"props":135,"children":137},{"id":136},"_3-ways-we-can-preview-experiments-in-webtrends-optimize",[138],{"type":34,"value":139},"3 ways we can preview experiments in Webtrends Optimize",{"type":21,"tag":141,"props":142,"children":143},"ul",{},[144,158,167],{"type":21,"tag":145,"props":146,"children":147},"li",{},[148,150,156],{"type":34,"value":149},"Using ",{"type":21,"tag":151,"props":152,"children":153},"strong",{},[154],{"type":34,"value":155},"Experiment Preview",{"type":34,"value":157}," section",{"type":21,"tag":145,"props":159,"children":160},{},[161,162],{"type":34,"value":149},{"type":21,"tag":151,"props":163,"children":164},{},[165],{"type":34,"value":166},"Force Experiment Widget",{"type":21,"tag":145,"props":168,"children":169},{},[170,172],{"type":34,"value":171},"Using query parameter ",{"type":21,"tag":151,"props":173,"children":174},{},[175],{"type":34,"value":176},"?_wt.mode=staging",{"type":21,"tag":29,"props":178,"children":180},{"id":179},"preview-experiments-using-experiment-preview-section",[181],{"type":34,"value":182},"Preview experiments using Experiment Preview section",{"type":21,"tag":184,"props":185,"children":186},"ol",{},[187,192,197,202,207,212,217],{"type":21,"tag":145,"props":188,"children":189},{},[190],{"type":34,"value":191},"Log in to Webtrends Optimize.",{"type":21,"tag":145,"props":193,"children":194},{},[195],{"type":34,"value":196},"Go to Dashboard.",{"type":21,"tag":145,"props":198,"children":199},{},[200],{"type":34,"value":201},"Click on the desired experiment from the list.",{"type":21,"tag":145,"props":203,"children":204},{},[205],{"type":34,"value":206},"Move the content slider to the 4th item.",{"type":21,"tag":145,"props":208,"children":209},{},[210],{"type":34,"value":211},"Now you'll see the Experiment Preview section like the below screenshot.",{"type":21,"tag":145,"props":213,"children":214},{},[215],{"type":34,"value":216},"Copy desired variation link by clicking on the clipboard icon and preview it.",{"type":21,"tag":145,"props":218,"children":219},{},[220],{"type":34,"value":221},"That's how to preview experiments using Webtrends default preview links.",{"type":21,"tag":37,"props":223,"children":224},{},[225],{"type":21,"tag":226,"props":227,"children":230},"img",{"alt":228,"src":229},"image","https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijpwkbh23l63ahlo62vc.png",[],{"type":21,"tag":29,"props":232,"children":234},{"id":233},"preview-experiments-using-force-experiment-widget",[235],{"type":34,"value":236},"Preview experiments using Force Experiment Widget",{"type":21,"tag":184,"props":238,"children":239},{},[240,253,265,270,281],{"type":21,"tag":145,"props":241,"children":242},{},[243,245],{"type":34,"value":244},"Go to ",{"type":21,"tag":246,"props":247,"children":251},"a",{"href":248,"rel":249},"https://c.webtrends-optimize.com/acs/fxp/install.html",[250],"nofollow",[252],{"type":34,"value":248},{"type":21,"tag":145,"props":254,"children":255},{},[256,258,263],{"type":34,"value":257},"Drag and drop the ",{"type":21,"tag":151,"props":259,"children":260},{},[261],{"type":34,"value":262},"WTO Force Experiment",{"type":34,"value":264}," button to your bookmarks bar.",{"type":21,"tag":145,"props":266,"children":267},{},[268],{"type":34,"value":269},"Visit the test page (target page where the variation will run).",{"type":21,"tag":145,"props":271,"children":272},{},[273,275,279],{"type":34,"value":274},"Click/tap on the ",{"type":21,"tag":151,"props":276,"children":277},{},[278],{"type":34,"value":262},{"type":34,"value":280}," bookmarklet.",{"type":21,"tag":145,"props":282,"children":283},{},[284],{"type":34,"value":285},"It will open a popup from where you will be able to select your desired variation.",{"type":21,"tag":37,"props":287,"children":288},{},[289,295],{"type":21,"tag":290,"props":291,"children":292},"em",{},[293],{"type":34,"value":294},"NOTE:",{"type":34,"value":296}," You can paste the following code to the console to open the Force Experiment Widget.",{"type":21,"tag":298,"props":299,"children":304},"pre",{"className":300,"code":302,"filename":303,"language":303,"meta":8},[301],"language-js","javascript:function FXP(){var a=\"https://c.webtrends-optimize.com/acs/fxp\",b=\"_wto.fxp\";window[b+\":cfg\"]={debug:!1,insTS:\"1627290085077\",baseURL:a,instRef:\"PROD\"};var c=document.getElementById(b);if(c)window.WTOExp&&WTOExp.Run(\"bookmarklet\");else{c=document.createElement(\"script\"),c.id=b,c.src=\"https://c.webtrends-optimize.com/acs/fxp/wto_fxp.min.js\";var d=document.body;c.onerror=function(){d.removeChild(c),alert(\"Error while loading WTO ForceExp. Try again.\")},d&&d.appendChild(c)}}FXP();\n","js",[305],{"type":21,"tag":65,"props":306,"children":307},{"__ignoreMap":8},[308],{"type":34,"value":302},{"type":21,"tag":29,"props":310,"children":312},{"id":311},"preview-experiments-using-the-query-parameter",[313],{"type":34,"value":314},"Preview experiments using the query parameter",{"type":21,"tag":141,"props":316,"children":317},{},[318],{"type":21,"tag":145,"props":319,"children":320},{},[321,323,327],{"type":34,"value":322},"Add ",{"type":21,"tag":151,"props":324,"children":325},{},[326],{"type":34,"value":176},{"type":34,"value":328}," query parameter at the end of target URL to view the variation.",{"type":21,"tag":37,"props":330,"children":331},{},[332],{"type":34,"value":333},"It will show the variation randomly, maybe variation 1, variation 2, or even control. If you have multiple variations and you want to view a specific variation all the time, then you have to set that up.",{"type":21,"tag":37,"props":335,"children":336},{},[337],{"type":34,"value":338},"To do that, go to the dashboard, click on the desired experiment to open the content slider, and find the display dropdown at the bottom right corner of the 1st slide. See the screenshot below.",{"type":21,"tag":37,"props":340,"children":341},{},[342],{"type":21,"tag":226,"props":343,"children":345},{"alt":228,"src":344},"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61u247yv5weth93x502i.png",[],{"type":21,"tag":37,"props":347,"children":348},{},[349],{"type":34,"value":350},"Clicking on that display select dropdown, a modal popup will open like the following screenshot.",{"type":21,"tag":37,"props":352,"children":353},{},[354],{"type":21,"tag":226,"props":355,"children":357},{"alt":228,"src":356},"https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tokdzz7zjl3icg4x13yc.png",[],{"type":21,"tag":37,"props":359,"children":360},{},[361],{"type":34,"value":362},"Here you will see all the available variations you have for preview including control.",{"type":21,"tag":37,"props":364,"children":365},{},[366],{"type":34,"value":367},"By default, variations are showing randomly but you can force it to display a specific variation by selecting the desired variation from here.",{"type":21,"tag":29,"props":369,"children":371},{"id":370},"notes",[372],{"type":34,"value":373},"Notes",{"type":21,"tag":37,"props":375,"children":376},{},[377],{"type":34,"value":378},"If your test depends on other live/published tests, then ensure those tests are available in the staging mode otherwise the preview links won't work as expected.",{"type":21,"tag":29,"props":380,"children":382},{"id":381},"further-reading",[383],{"type":34,"value":384},"Further reading",{"type":21,"tag":141,"props":386,"children":387},{},[388],{"type":21,"tag":145,"props":389,"children":390},{},[391],{"type":21,"tag":246,"props":392,"children":395},{"href":393,"rel":394},"https://help.webtrends-optimize.com/optimize/qa/preview-experiments/",[250],[396],{"type":34,"value":393},{"title":8,"searchDepth":108,"depth":108,"links":398},[399,400,401,402,403,404],{"id":136,"depth":108,"text":139},{"id":179,"depth":108,"text":182},{"id":233,"depth":108,"text":236},{"id":311,"depth":108,"text":314},{"id":370,"depth":108,"text":373},{"id":381,"depth":108,"text":384},"content:articles:how-to-preview-experiments-in-webtrends-optimize.md","articles/how-to-preview-experiments-in-webtrends-optimize.md","articles/how-to-preview-experiments-in-webtrends-optimize",1788788972200]