css-layout | em、rem、流式布局、弹性布局、css效果

I'm trying to figure out how to reproduce the behavior of the "border-radius" css property into an HTML canvas.

So i've already done something in Javascript in order to compute the correct borders of a given shape, using a specific radius (for each corner).

Here is the previous question if needed : Gecko - CSS layout border radius - Javascript conversion

I've managed to get close from the browser adaptation but there's still an issue, and it seems that it's the last, and the hard part!

Let's take an example in order to explain you the problem

Take a shape of 100px width & 100px height. Now apply the following radius to each corner :

• Top left : 37px
• Top right : 100px
• Bottom right : 1px
• Bottom left : 100px

So the css style for this will be border-radius : 37px 100px 1px 100px

Now let's consider using the code below in order to draw this shape in a canvas.

By using the function correctRadius(r, w, h) in order to avoid bad shapes, each corners will be computed like that :

=> {tl: 18.5, tr: 81.5, br: 0.5, bl: 81.5}

Here is a visual of this :

You will be able to test it in the following snippet

As you can see, the browser shape (green) is overlapped with the canvas shape (brown + 'pink' due to opacity). I've put some opacity on it in order to check the bad corners (pink).

The brown shape do not fit properly into the green shape, the top left corner is getting out of the base, and the bottom left and top right corners don't fit the green shape.

I've already tried to fix that but with no success, and also looked the sources of the Gecko layout engine (https://github.com/mozilla/gecko-dev) in this file : layout/painting/nsCSSRenderingBorders.cpp, but haven't found anything + i have no skills in C++

If anyone could help me to figure this out, or give me some advice, i'll be able to fix this and get the borders working

Instagram released (at some point this year) an update on their in-app browser (webview) that at least in iOS, breaks most sites.

The attached image is the website opened after clicking the "Learn more" on an Ad, but has the same behavior also on Profile Bio links.

The problem? It seems the top bar is an overlay on the website, making most navigations for mobile (hamburger icon on top left corner) unusable/unclickable and/or hidden.

The innerHeight is the same as screen.height. As answered at How to adjust html/css layout for instagram in-app browser? we can sniff the user agent of the webview.

Unsure if they will fix it at some point, but seems that any padding-top kind of solution would break if they do.

How can i make this that the check all only focus the 4 inputs that belong to that check all? If you now click 2 (or 3) link all and you change one input all the inputs will change then. I only want that the inputs change that belong to that check all.