Html Question posted in
Some basic documentation can be found here.

Html – CSS Radial Gradient Browser Inconsistency

Take a look at the two images below. I am using a radial gradient to create a reflection effect on a picture frame. As it is moved around in 3D space, I am changing its background position.

background-image: radial-gradient(50cqw, #ffffffff, transparent);
background-repeat: no-repeat;
background-position-x: var(--reflection-x);
background-position-y: var(--reflection-y);

The first image is from Safari (desktop/iOS) and Android. You can see that the gradient continues to the edge. The second image is from Edge and Chrome on a PC. The gradient appears clipped by the boundaries of the border box before the background was moved.

The latter can be fixed by applying a negative margin and clipping the background.

margin: -75cqw;
clip-path: margin-box;

However, in iOS, the background is not clipped and a white glare is visible across much of the screen. Does anyone have any ideas on how to fix this? I’ve looked through the background documentation on MDN very carefully. The only solution I can come up with is to use JavaScript to apply a different style based on the user agent.

enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It turns out this was simple. Instead of positioning the gradient by moving the background image, I just had to position it using the radial gradient syntax:

    background-image: radial-gradient(50cqw at var(--reflection-x) var(--reflection-y), #ffffffff, transparent);

  2. 0

    You can use the background size to control the gradient size

    background-image: radial-gradient(50cqw, #ffffffff, transparent);
background-repeat: no-repeat;
background-position-x: var(--reflection-x);
background-position-y: var(--reflection-y);
background-size: 100% 100%;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search