Browser Compatibility

env(safe-area-inset-bottom) 兼容写法

先看下兼容性：

可以看到 @supports 兼容性很好，所以使用 @supports 做兼容是个不错的选择。

例：

1

2

3

4

5

6

7

8

9

10

11

12

13

@supports (padding-bottom: env(safe-area-inset-bottom)) or

(padding-bottom: constant(safe-area-inset-bottom)) {

.your-dom {

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */

padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

}

@supports not (padding-bottom: env(safe-area-inset-bottom)) {

.you-dom {

padding-bottom: 20px; /* 根据实际情况设定兜底距离 */

}

2025-01-07by SKILLNULL Browser Compatibility, HTML&CSS, 前端阅读(75)评论(0)

ios滚动列表白屏问题

移动端分页列表，在ios上滚动加载分页时候，使用scrollTop，会引起白屏问题。

看不少文章说是使用了-webkit-overflow-scrolling: touch;引起的硬件加速问题。亲测删除问题仍然存在。

1

2

3

4

5

this.$nextTick(() => {

window.scrollTo(0, 1);

window.scrollTo(0, 0);

})

[cr[……]

2023-07-12by SKILLNULL Browser Compatibility, HTML&CSS, JavaScript, Vue, 前端阅读(2979)评论(0)

移动端100vh的问题与解决方案

之所以100vh在移动端出现问题，原因大致如上图，真搞不懂，为什么总是有反人类的设计出现。

经过多方参考，实测有效的方案如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<style>

:root {

--vh: 1vh;

}

</style>

!(function (n, e) {

function setViewHeight() {

var windowVH = e.innerHeight / 100;

n.documentElement.style.setProperty('--vh', windowVH + 'px');

}

var i = 'orientationchange' in window ? 'orientationchange' : 'resize';

n.addEventListener('DOMContentLoaded', setViewHeight);

e.addEventListener(i, setViewHeight);

})(document, window)

</script>

使用：
[crayon-678b0a3d41dcb69916821[……]

2023-03-30by SKILLNULL Browser Compatibility, HTML&CSS, 前端阅读(6770)评论(0)

AceEditor在safari下光标错位问题

修复方法：

1

2

3

.ace_editor {

font: 12px/normal 'Menlo', 'Monaco', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;

}

2020-05-08by SKILLNULL Browser Compatibility 阅读(5053)评论(0)

iframe在ios上不能滚动问题解决方法

同这篇文章一样，用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div，然后设置-webkit-overflow-scrolling属性。

例如：

1

2

3

</div>

[c[……]

2019-08-20by SKILLNULL Browser Compatibility, HTML&CSS 阅读(13746)评论(0)

transform中translate导致页面模糊的原因探究

可以看出导致页面模糊的原因是因为，mian设置了overflow:hidden; 同时second-verify-box设置了transform属性。

但是同样拥有同样设置的login-wrap却没有出现这个问题，暂时将这个现象记录下来。

如果有人知道具体原因的，可以评论告知[……]

2019-07-04by SKILLNULL Browser Compatibility 阅读(4976)评论(0)

移动端滚动不流畅问题

正常的移动端上下滑动，松开手指页面还会速度递减的再滑动一段距离，但是有时候会出现手指松开滑动就停止的情况，导致页面出现卡顿的现象。

出现的原因大多数是因为加了：

1	overflow: auto;

可以在添加了overflow: auto;的元素上再添加下面的[……]

2019-01-15by SKILLNULL Browser Compatibility 阅读(6060)评论(0)

2025年一月
一	二	三	四	五	六	日
« 12月
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31