[{"data":1,"prerenderedAt":119},["ShallowReactive",2],{"blog-tag-safari":3},[4],{"_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",1788788972392]