[{"data":1,"prerenderedAt":123},["ShallowReactive",2],{"blog-safari-inline-block-fix-for-columns-layout":3,"blog-surround-safari-inline-block-fix-for-columns-layout":118},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":7,"createdAt":9,"publish":10,"tags":11,"body":16,"_type":112,"_id":113,"_source":114,"_file":115,"_stem":116,"_extension":117},"/articles/safari-inline-block-fix-for-columns-layout","articles",false,"","Safari inline-block fix for CSS columns layout","04/11/2023",true,[12,13,14,15],"css","safari","issue","fix",{"type":17,"children":18,"toc":106},"root",[19,41,54],{"type":20,"tag":21,"props":22,"children":26},"element","div",{"className":23},[24,25],"l-wrap","l-wrap--700",[27,35],{"type":20,"tag":28,"props":29,"children":31},"h2",{"id":30},"the-problem",[32],{"type":33,"value":34},"text","The problem",{"type":20,"tag":36,"props":37,"children":38},"p",{},[39],{"type":33,"value":40},"Using css columns property gives us different results for Chrome and Safari. Check below gif file.",{"type":20,"tag":21,"props":42,"children":45},{"className":43},[24,44],"l-wrap--md",[46],{"type":20,"tag":47,"props":48,"children":53},"markdown-image",{"src":49,"alt":50,"className":51},"article-images/safari-inline-block-issue.gif","Safari inline-block issue",[52],"u-my-32",[],{"type":20,"tag":21,"props":55,"children":57},{"className":56},[24,25],[58,71,77,82,88],{"type":20,"tag":36,"props":59,"children":60},{},[61,63,69],{"type":33,"value":62},"Look closely to the above gif file and you'll see the border positions differently if we toggle ",{"type":20,"tag":64,"props":65,"children":66},"code",{},[67],{"type":33,"value":68},"display: inline-block",{"type":33,"value":70}," 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":20,"tag":28,"props":72,"children":74},{"id":73},"the-finding",[75],{"type":33,"value":76},"The finding",{"type":20,"tag":36,"props":78,"children":79},{},[80],{"type":33,"value":81},"Border bottom works incorrectly in Safari while using CSS columns for layout.",{"type":20,"tag":28,"props":83,"children":85},{"id":84},"the-fix",[86],{"type":33,"value":87},"The fix",{"type":20,"tag":36,"props":89,"children":90},{},[91,93,97,99,104],{"type":33,"value":92},"Use ",{"type":20,"tag":64,"props":94,"children":95},{},[96],{"type":33,"value":68},{"type":33,"value":98}," along with the ",{"type":20,"tag":64,"props":100,"children":101},{},[102],{"type":33,"value":103},"border-bottom",{"type":33,"value":105}," rule.",{"title":7,"searchDepth":107,"depth":107,"links":108},2,[109,110,111],{"id":30,"depth":107,"text":34},{"id":73,"depth":107,"text":76},{"id":84,"depth":107,"text":87},"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",[119,120],null,{"_path":121,"title":122},"/articles/how-to-preview-experiments-in-webtrends-optimize","How to preview experiments in Webtrends Optimize",1788788972444]