Implementing a star rating system with HTML5 and CSS.

The default style of the Bootstrap switch cannot be changed because it draws visual effects through pseudo elements::before/::after, which needs to cover .form-switch.form-check-input .form-check-label::before (track) and ::after (slider) and handle all states such as: checked, :disabled and :checked:disabled.

In Safari, the background-filter needs to be prefixed with -webkit- and the background is opaque to take effect; the blur value cannot be 0; the size of the blurred area affects performance more than the numerical value; text needs to be enhanced with contrast and strokes to ensure readability.

Transition realizes the lightest and controllable page fade-out. It needs to cooperate with the two-step control of opacity and visibility. JS listens to the transitionend and then uninstalls the component. The animation mask is prone to lag, z-index conflicts and the status is difficult to synchronize. It is only necessary in a few scenarios such as sensitive information.

Shake animation should use translateX() to achieve left and right displacement instead of rotate(); it needs to be combined with @keyframes to define a 0%/25%/50%/75%/100% offset sequence, and the offset is controlled within ±2px~±6px; animation-fill-m must be added ode:forwards (or use both), select cubic-bezier(.36,.07,.19,.97) for easing; the old animation must be cleared and forced to rearrange before JS is triggered; use will-change with caution on the mobile terminal, and only add translateZ(0) to ensure hardware acceleration.

The fundamental reason is that the browser does not support the direct application of position:sticky to the thead, because the display:table of the parent container table limits the sticky behavior; the tbody must be moved into an independent scrolling container and a display:block split structure must be set up to unify the column width with colgroup to achieve a stable fixed header.

Mobile side::-webkit-scrollbar often fails because Android WebView and Safari before iOS 16.4 do not support this pseudo element; iOS 16.4 only has limited support, and Android basically does not support it; the alternative is to disable the native scroll bar and customize it with CSS JS.

The essence of the inaccurate offset of position:absolute in IE6–8 is that the parent container does not trigger hasLayout, causing the absolute positioning reference to the wrong containing block; it needs to be actively triggered by reliable methods such as zoom:1, rather than relying solely on position:relative.

The input:valid and input:invalid pseudo-classes do not take effect because the browser does not trigger native verification due to the lack of required attributes or type semantic types (such as email, url); Bootstrap's is-valid/is-invalid relies on JS rather than pseudo-classes, so you need to ensure that HTML constraints exist and CSS weight is sufficient.