1. Safari 3D transforms ignore the z-index hierarchy
In Safari (Safari on iOS, wechat on iPhone, and Safari on Mac OS X), when we use the 3D Transform, If the ancestor element not overflow: hidden/scroll/auto restrictions, can directly to ignore their own and other elements of z – index cascading order Settings, and direct use of 3 d perspective of the real world. For example, in the scene below, the module inside the red box in the figure uses 3D Transform to rotate the animation. However, in Safari browser, the Z-index of the TWO-DIMENSIONAL code mask layer is ignored and the 3D perspective of the real world is used for rendering. There are overlapping bugs:
Solutions:
- Parent, any parent, non-body level, set Overflow: Hidden to restore rendering as in other browsers.
- An eye for an eye. Sometimes, if the page is too complex and we cannot set overflow:hidden to the parent, we can set the affected element to a large enough translateZ value, such as translateZ(100px).
2. Center compatible text
The normal way to center text is to make the elements height and line-height equal, but in the Android environment the center fails when the font size is less than 14px/0.7rem.
Solutions:
-
Judge the system environment (Android /IOS) for fine tuning;
-
Font-size, height, width all enlarged to 2 times, using transform to scale
height: 1.rem;
width: 2rem;
font-size: 0.5rem; To:height: 2rem;
width4:rem;
font-size: 1.rem;
transform: scale(0. 5);
Copy the codeMargin: -0.35 rem-0.45 REM 0; Adjust the
- One solution is to change REM to PX.
3. When the two modules wrapped with a label are rotated 90 degrees, one of them will fail to click
Defines an animation effect as follows (sass code) :
@keyframes official-featured_rotate { 10%,50%{ transform:rotateY(90deg); } 60%,100%{ transform:rotateY(0deg); } } &-rotate { position: absolute; width: rem(350/2); height: rem(160/2); transform-style:preserve-3d; The transform: translate3d (0, 0); &.ani_rotate { animation:official-featured_rotate 5s linear 0s infinite; animation-delay: 2s; } &__item { width: rem(350/2); height: rem(160/2); position: absolute; &:nth-child(1) { transform: translateZ(rem(350/4)); } &:nth-child(2) {transform: rotateY(90deg) translate3d(0,0,rem(350/4)); }}}Copy the codeHere are two A labels, rotated 90 degrees so that the two A’s can be displayed in a loop. Here, the basic style of the two is the same, as is the width and height. However, under Android (ios normal), only the first A label that can be seen when opening the page can jump and bind events normally. The second “A” doesn’t jump, so I thought I can jump by clicking on events no, and then binding to any events doesn’t work.
Solutions:
The test found that the click worked perfectly during the rotation (as long as it was not fully rotated by 90 degrees). So I changed the rotation Angle to 89.99 degrees, and everything was fine. Change the animation effect to:
@keyframes official-featured_rotate {
10%,50%{
transform:rotateY(89.99 deg); Were 60% and 100%} {transform:rotateY(0deg); }}Copy the codeThen find the stackoverflow (stackoverflow.com/questions/2…). . It says the same thing in there.
4. Use currentColor to simplify CSS
When setting border-color, background-color, etc., use currentColor[the same font color as the current element] to simplify CSS.
.div{
color: rgba(0, 0, 85);font-weight: 500;
text-align: left;
padding: 20px;
border: solid 1px currentColor;
}
Copy the code5. Use the Grey filter to make the Disable effect for styles
Gray images can be directly filtered without cutting another image. As shown in figure:
Solutions:
.coupon_style .disable {
-webkit-filter: grayscale(1);
}
Copy the code6. Curve shadow implementation
- Multiple shadows overlap, which is normal shadow + curve shadow
- Under normal circumstances, there is a rectangle with a normal shadow, as the main projection, this time define a rounded rectangle with a certain radian rounded corner, and then put under the normal rectangle, and expose a little shadow with radian at the bottom, so that the effect of curve projection can be formed.
Effect:
7. The realization of warped edge shadow
A rectangle can be formed by using :before and :after, plus the properties of absolute positioning. At this time, skew and Rote of CSS3 are combined. This creates a parallelogram with an Angle of rotation, which overlaps with the original rectangle to create a warped edge effect.
Effect:
Code:
8. Use -webkit-mask to achieve mask effect
Effect:
background: url("images/logo.png") no-repeat;
-webkit-mask : url("images/mask.png");
Copy the codeIn mask.png, black means opaque (alpha: 1) and other parts are transparent (alpha: 0). Overlay it on the background image. Note that the transparent position of the background image will also become transparent, leaving an opaque shape, i.e. the visible shape of the background image is the same as that of mask.png. This is called “mask”.
9. Image adaptive placeholder method
When the image is not loaded correctly or before loading is completed, the height of the image is 0, the container will collapse because there is no content, so the container can not support the height, and if the loading is slow, the image will blink after loading is completed.
In CSS, when the padding-top/bottom value is a percentage, the value is referenced by the width of its parent element. Therefore, when the ratio of width to height is fixed, padding-top/bottom can be used for adaptive image placeholder to solve the problem of page flicker.
If you set only the padding-top/bottom value as a percentage, the problem is that the max-height property of the method container is invalid, and you can’t limit the maximum height of the container.
Therefore, you can add a child of the pseudo-element to the container to hold up the content, which has a padding-top:100%, and max-height to try to limit the height of the container. Finally, you can add the content in absolute position. Such as:
#container{
width: 50%;
max-height:300px;
background-color:#ddd;
/* Since margin collapse exists, we need to build BFC to ensure that the container will not be affected, so we can give the container overflow:hidden to ensure that the margin of the pseudo-element will not collapse. * /
overflow:hidden;
position: relative; /* The parent container is positioned relative */
}
.placeholder::after{
content:"";
display:block;
margin-top:100%;
}
img{
position:absolute; /* The content is absolutely positioned */
left: 50%;
top: 50%;
transform: translateX(50%)translateY(50%);/* Control content absolute position */
width:80%; /* Controls image overflow, so the actual width of the image used here is affected by the parent container */
}
Copy the codeHowever, for images with variable ratio of width to height, this can lead to incomplete image display. Use caution.
10. Page adaptation best practices
The following CSS is the best rem and VM and CALC based practice after large project practice:
html {
font-size: 16px;
}
@media screen and (min-width: 375px) {
html {
/* iPhone6 375px as 16px benchmark, 414px exactly 18px, 600 20px */
font-size: calc(100% + 2 * (100vw - 375px) / 39);
font-size: calc(16px + 2 * (100vw - 375px) / 39); }} @media screen and (min-width: 414px) {
html {
/* 414px-1000px Add 1px(18px-22px) */ for every 100 pixels wide
font-size: calc112.5% + 4 times 100vw-414px /586);
font-size: calc(18px + 4 * (100vw - 414px) / 586); }} @media screen and (min-width: 600px) {
html {
/* 600px-1000px add 1px(20px-24px) */ for every 100 pixels wide
font-size: calc(125% + 4 * (100vw - 600px) / 400);
font-size: calc(20px + 4 * (100vw - 600px) / 400); }} @media screen and (min-width: 1000px) {
html {
/* 1000px increments 0.5 pixels per 100 pixels */
font-size: calc137.5% + 6 * (100vw-1000px) /1000);
font-size: calc(22px + 6 * (100vw - 1000px) / 1000); }}Copy the codeThe last
- Welcome to add my wechat (Winty230), pull you into the technology group, long-term exchange learning…
- Welcome to pay attention to “front-end Q”, seriously learn front-end, do a professional technical people…
