search

Raku / doc-website

Tooling to build/run the documentation website
Artistic License 2.0
7 stars 10 forks source link

Rendering issue on safari #341

Closed coke closed 7 months ago

coke commented 7 months ago

Complaint:

15 hr. ago Hm. FWIW, that docs page doesn't render properly on Mobile Safari. Missing text cut off the right margin, not scrollable or zoomable to, just ... missing entirely.

Referring to:

https://docs.raku.org/type/Supply#sub_signal

coke commented 7 months ago

I see no issue on safari on the mac, even with a small viewport. Definitely repeatable on Safari on ios, even if you ask for the desktop site.

coke commented 7 months ago

On a mac at least, you can see the issue if you open the page in Safari on the mac, then from the menu pick Develop -> Open Page With -> and then pick one of the iPhone options. So we can test the rendering easily from macs as needed.

lizmat commented 7 months ago

Actually, I was able to reproduce this without doing the iPhone options. It happens for certain kinds of width of the viewport.

lizmat commented 7 months ago

Going from wide to smaller:

Good: image

Bad: image

Good again: image

coke commented 7 months ago

looks like the bad width is about 775 to 825 pixels

finanalyst commented 7 months ago

Is this issue only on one page, or is it more generic?

Is the hamburger (three lines instead of a navigation top menu) being shown? The hamburger indicates that the width is a problem with the 'tablet' set of CSS attributes (the bulma CSS environment has three settings)

There are some issues with the tablet width on a pc too.

On Thu, 1 Feb 2024, 13:17 Will Coleda, @.***> wrote:

looks like the bad width is about 775 to 825 pixels

— Reply to this email directly, view it on GitHub https://github.com/Raku/doc-website/issues/341#issuecomment-1921304663, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACYZHBKXFDCZ2R7MY5YI5TYROIWJAVCNFSM6AAAAABCTIOCROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRRGMYDINRWGM . You are receiving this because you are subscribed to this thread.Message ID: @.***>

coke commented 7 months ago

Also happens on Chrome for certain widths (which seem different than the safari widths!)

It's generic, the original URL was just the one they were discussion on reddit.

The hamburger is shown at width X, where the rendering is fine and is on at any width below that. then at width Y (which is less than X), the formatting breaks. Then at width Z (which is less than Y) the text correctly flows again.

finanalyst commented 7 months ago

I have just had chance to test this. The problem is definitely with the 'Tablet' form. @rawleyfowler is this something you could help with? You have handled a CSS issue before. A solution will be to adjust widths in the SCSS under the 'page-styling' plugin

finanalyst commented 7 months ago

@coke @lizmat I found a fix. It changes the look and feel of main content pages a little bit, but the responsiveness is better, and it fixes this particular bug. But it may change some other pages. The fix is deployed at new-raku

If you like the fix, I'll create a PR for doc-website.

rawleyfowler commented 7 months ago

@finanalyst Hey. I'm available if you need me, sorry I'm a father now so I have less and less time for OSS!

finanalyst commented 7 months ago

@rawleyfowler Thanks for the response. I think I have found a fix. Congratulations about becoming a father. Life goes on!!!! All contributions welcome.

coke commented 7 months ago

it fixes the bug. one nit, it seems to increase the border.

finanalyst commented 7 months ago

Yes I just noticed that too. I'll have another look. I don't think that's difficult to fix. I'll ping you again when I fixed it. Any other problems with other pages?

On Fri, 9 Feb 2024, 01:45 Will Coleda, @.***> wrote:

it fixes the bug. one nit, it seems to increase the border.

— Reply to this email directly, view it on GitHub https://github.com/Raku/doc-website/issues/341#issuecomment-1935213661, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACYZHHZUAEQEPRUU5DT4ZDYSV5SLAVCNFSM6AAAAABCTIOCROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZVGIYTGNRWGE . You are receiving this because you were mentioned.Message ID: @.***>

coke commented 7 months ago

That was the only thing I noticed

On Fri, Feb 9, 2024 at 5:13 AM Richard Hainsworth @.***> wrote:

Yes I just noticed that too. I'll have another look. I don't think that's difficult to fix. I'll ping you again when I fixed it. Any other problems with other pages?

On Fri, 9 Feb 2024, 01:45 Will Coleda, @.***> wrote:

it fixes the bug. one nit, it seems to increase the border.

— Reply to this email directly, view it on GitHub https://github.com/Raku/doc-website/issues/341#issuecomment-1935213661,

or unsubscribe < https://github.com/notifications/unsubscribe-auth/AACYZHHZUAEQEPRUU5DT4ZDYSV5SLAVCNFSM6AAAAABCTIOCROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZVGIYTGNRWGE>

. You are receiving this because you were mentioned.Message ID: @.***>

— Reply to this email directly, view it on GitHub https://github.com/Raku/doc-website/issues/341#issuecomment-1935655627, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAMIUNPOFALL7KWNLVJX7DYSXZFHAVCNFSM6AAAAABCTIOCROVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZVGY2TKNRSG4 . You are receiving this because you were mentioned.Message ID: @.***>

finanalyst commented 7 months ago

@coke reduced bottom margin, and increased the width of the main column. Looks better now. New CSS on new-raku. I'm creating a PR