chrome: css:transform:scale时部分缩放比例相邻图片间有间隔缝隙(chrome 106.0.5249.119)
一,问题的表现:
页面上左右两个div,里面各有一张图片,图片是相邻的,在页面上应该象一张图一样显示,
代码如下:
<!-- background: #000000; --> <div style="width:100%;height:100%;" onclick="disp_header_footer()"> <!--左侧div--> <div style="width:50%;height:100%;float:left;position: relative;"> {$rowleft.page_content} </div> <!--右侧div--> <div style="width:50%;height:100%;float:left;position: relative;"> {$rowright.page_content} </div> </div>
父div做transform:scale时,正常情况各浏览器均无问题,但chrome出现部分缩放比例在两张图片间出现缝隙,
scale时:safari无问题,firefox无问题,如图:
左右两侧的图片是紧密连接的,看不到中间有间隔
chrome在某个比例下如下图:可以看到有一条白线,是因为背景色是白色
但chrome并非总出现,比例是 0.6、0.65、0.625时正常,
如果类似0.566598这种较长的数字时会出现上述问题。
说明:刘宏缔的架构森林是一个专注架构的博客,
网站:https://blog.imgtouch.com
本文: https://blog.imgtouch.com/index.php/2023/06/03/chrome-css-transform-scale-shi-bu-fen-suo-fang-bi-li-xiang/
对应的源码可以访问这里获取: https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明:作者:刘宏缔 邮箱: 371125307@qq.com
二,临时的解决办法:
让右侧的div向左移0.3个像素:
代码:
<!-- background: #000000; --> <div style="width:100%;height:100%;" onclick="disp_header_footer()"> <!--左侧div--> <div style="width:50%;height:100%;float:left;position: relative;"> {$rowleft.page_content} </div> <!--右侧div--> <div style="width:50%;height:100%;float:left;margin-left:-0.3px;position: relative;"> {$rowright.page_content} </div> </div>
效果:能正常显示了,如图:
说明:这个解决办法不够好,如果大家有更好的处理办法可以在评论时说一下
三,查看chrome的版本: