H5奇葩问题总结

[preflower]

iframe 中修改 src 会添加 history 栈

若 iframe内页面为开发可操作

不直接修改src 而是通过删除旧iframe插入新iframe来解决该问题

若iframe中为三方页面

一般插入 history 栈影响的是 hsitory.back() / go (-1) 功能

解决办法: 打开iframe前记录 window.history.length; 在需要回退的时候 将最新 history.length 与之前进行比较，则可以知道需要 回退多少页面

[preflower]

flex孙子元素设置ellipsis无效问题

例子：https://codepen.io/preflower/pen/NWRMgmp

原因 - https://drafts.csswg.org/css-flexbox/#min-size-auto

flex items 自动最小尺寸(automatic minimum size)在当前情况下是'auto'即元素尺寸导致溢出

自动最小尺寸(automatic minimum size)

• 非滚动元素基于内容最小尺寸(content-based minimum size)
• 滚动元素则默认为0

内容最小尺寸 (content-based minimum size)

• 判断是否有指定尺寸，有则使用
• 判断是否有固定宽高比，有则使用
• 使用元素尺寸

解决方案

设置flex items设置min-width: 0即可

[preflower]

flex孙子元素设置ellipsis无效问题

例子：https://codepen.io/preflower/pen/NWRMgmp

原因 - https://drafts.csswg.org/css-flexbox/#min-size-auto

flex items 自动最小尺寸(automatic minimum size)在当前情况下是'auto'即元素尺寸导致溢出

自动最小尺寸(automatic minimum size)

• 非滚动元素基于内容最小尺寸(content-based minimum size)
• 滚动元素则默认为0

内容最小尺寸 (content-based minimum size)

• 判断是否有指定尺寸，有则使用
• 判断是否有固定宽高比，有则使用
• 使用元素尺寸

解决方案

设置flex items设置min-width: 0即可

React-Native中此问题不能参照该方法解决； 设置子元素flex: 1指定宽度可解决；详见issue

[preflower]

Andorid端系统字体放大自动换行问题

现象

用户将系统字体放大后，部分文本在还有空余空间的情况下换行了

原因

ul标签会隐式地触发字体放大(这种放大在chrome inspect里无法察觉到，只能通过肉眼观测)，而flex布局又会将元素的宽度基于未放大字体填充，故导致的此问题的发生