max-width: 什么年代了的浏览器不兼容胃疼事件

好久没写点啥了…忙起来懒起来制药效率不如高三…

Safari处理max-width逻辑和chrome略不同
测试版本：
Chrome: 56,58;
Safari: 7.1,10.1(代测);
FireFox: 52

一个用了bootstrap的不知名框架（一开始不是我负责╮(╯_╰)╭），出问题的代码大概长这个样子：

html

css
img {max-width: 100%;}
.title.is-sticky {
width: 0px;
transition: 0.35s;
}
另外有事件触发给.title加上/删除.is-sticky
其效果是模拟一个线性划变动画

在父元素宽度大于0时，max-width:100%在Chrome/FireFox和Safari表现一样（正常显示）；
但当父元素宽度为0时，max-width:100%在Chrome/FireFox下表现为width:0，而Safari表现为width:initial。
也就是Safari下划变动画是正常的，但是一画完本该被隐藏的图片又显示出来了…

解决方案……：
方案1：给img也带上动态属性.is-sticky;
方案2：在.title下添加样式overflow: hidden。

写完发现这篇东西根本没什么营养orz果然我还是太菜了。