MobileSafari falsely claims CSS resize property support

• Component: CSS
• Status: NEW ---

[Bramus]

Recently I wrote an article on using CSS `resize: both;`: https://www.bram.us/2020/05/15/css-only-resizable-elements/

In browsers that don't support this property I wanted to show a warning on screen to notify users thereof. For this I use an @supports rule:

```css
.warning {
    display: block;
}

/* Hide warning in case browser supports resize: both; */
@supports (resize: both) {
    .warning {
        display: none;
    }
}
```

I've come to notice that MobileSafari – which does not support `resize: both;` – hides the warning and thus falsely claims to support said CSS resize property.

Demo: https://codepen.io/bramus/pen/RwWeqOP

[Radar WebKit Bug Importer]

<rdar://problem/63335059>

[Tim Nguyen (:ntim)]

The CSS property is technically detected/understood by the engine on mobile. It's just that we decide to hide the resizer on mobile.

[Sam Sneddon [:gsnedders]]

(In reply to Tim Nguyen (:ntim) from comment #2)
> The CSS property is technically detected/understood by the engine on mobile.
> It's just that we decide to hide the resizer on mobile.

Who owns the resizer? It seems like the resizer and the property should both be linked to a single setting if WebKit owns it.

[Tim Nguyen (:ntim)]

The resizer is implemented in RenderLayer.cpp (see canResize() and friends).

But yeah I agree, the best way to make supports work properly is to guard the CSS property behind a flag.

[Sam Sneddon [:gsnedders]]

(In reply to Tim Nguyen (:ntim) from comment #4)
> The resizer is implemented in RenderLayer.cpp (see canResize() and friends).
> 
> But yeah I agree, the best way to make supports work properly is to guard
> the CSS property behind a flag.

I… actually knew that. I guess my question was more "what hides it on mobile", or causes it to not be painted? Is it simply that they don't have a layer or something?

[Tim Nguyen (:ntim)]

(In reply to Sam Sneddon [:gsnedders] from comment #5)
> (In reply to Tim Nguyen (:ntim) from comment #4)
> > The resizer is implemented in RenderLayer.cpp (see canResize() and friends).
> > 
> > But yeah I agree, the best way to make supports work properly is to guard
> > the CSS property behind a flag.
> 
> I… actually knew that. I guess my question was more "what hides it on
> mobile", or causes it to not be painted? Is it simply that they don't have a
> layer or something?

No idea, maybe Simon can answer?

[Simon Fraser (smfr)]

I think the primary issue here is that we'd need to implement some touch event handling on iOS to actually support user interaction with the resize. That was never done, so early in iOS development it was decided to just not paint the resize.

[Sam Sneddon [:gsnedders]]

Ah, it's BuilderConverter::convertResize which contains the check, and the TextAreasAreResizable setting. We probably just want to gate the resize property on that setting.

[Tim Nguyen (:ntim)]

(In reply to Sam Sneddon [:gsnedders] from comment #8)
> Ah, it's BuilderConverter::convertResize which contains the check, and the
> TextAreasAreResizable setting. We probably just want to gate the resize
> property on that setting.

The check in that function is only for `resize: auto` (a non-standard value fwiw), this bug is about `resize: both`.