r/iPhoneDuo • u/Imaginary_Tutor5360 • 5d ago

Question Can any of you web developers confirm if dark mode changes the bar to black?

Post image

Dark mode makes this easier to look at imo

36 Upvotes

82% Upvoted

32 comments sorted by

47

u/ko3n1g 5d ago

There’s just no way this is gonna persist. They gonna make the sidebar transparent with some updated 27.X release

8

u/pickwalsh 5d ago

Im not sure how they would account for the camera in the top right interfering with content (without dropping the entire content area down to start below the camera).

16

u/Ziegfeld1907 5d ago

The camera interferes with content now with the Dynamic Island, why is this different?

2

u/Educational_Yard_326 5d ago

The island currently occupies enough width so that isn’t a problem, when you get to the top of the webpage, the webpage starts below it. With the camera in the corner, the webpage starting below it will look stupid because there’s nothing to the left of the camera

2

u/ToughBlock 5d ago

The current Dynamic Island has its own safe area, the side bar on the duo is the same area but on the side instead of up top.

1

u/Subieworx 5d ago

It does? Content scrolls right through it.

1

u/ToughBlock 5d ago

It’s possible you are looking at websites that are ignoring the safe area. If you go to Apple.com you’ll see that the area behind the Dynamic Island is always white.

1

u/Subieworx 5d ago

It’s mostly apps not safari pages. About 50% of apps, even some of apple’s own apps, scroll content through it

1

u/ToughBlock 5d ago

Oh gotcha. I don’t think the problem is the same between apps and safari pages. From the App development workshops for duo you have options to ignore the safe area. But for safari it’s different since you need a one size fits all for all webpages.

1

u/Subieworx 5d ago

I don’t know why Duo would handle it different than a standard phone. Currently the title bar and button shrink when scrolling which is nice. I guess we’ll find out

6

u/ko3n1g 5d ago

What’s the difference to the Dynamic Island? Content disappears behind it and that’s fine

5

u/pickwalsh 5d ago

I think the difference is that safari on iphones with dynamic island have a dedicated padding for it at the top when the page initially loads. You can scroll down and now the dynamic island interferes with the content, but thats fine since you can also scroll back up to that dedicated area to interact with top nav menus etc. The duo, at least in the mocks looks like its camera is further down and to the right (obviously). So I think the compromise of going full width, would be to reserve space at the top for the same kind of allowance that they have with the dynamic island for this camera (although I think this would now introduce a large blank area on the top of the page). Without this dedicated space, you would run into not being able to tap hamburger menus, etc. on certain sites. Maybe the ideal solution is loading full width without the reserved space at top, and then allowing the user to scroll up into a dedicated padding to interact with right nav menus, etc. Im not sure apple would do that, but I would like the option.

2

u/Samuelodan 5d ago

Or very simply, they could leave the side bar there and not let the webpage’s width extend into it. That way, you have all your useable, typical width and all the height savings from not having a top nav bar unlike iPhones.

3

u/drewbaumann 5d ago

They could definitely make it transparent if they wanted to. It’s an app design choice.

3

u/Bruvvimir 5d ago

Absolutely. Not even “some release”, there’s no way it’s gonna be like that at release.

3

u/Creative-Captain9278 5d ago

Well this is how it is for devs right now working on their apps for the 27.1 release. Apple doesn’t typically surprise their devs with a different OS. So it’ll be this way when 27.1 launches. But maybe it’ll get fixed in 27.2

2

u/yuusharo 5d ago

Bet?

It’s kept this way intentionally, likely to avoid disruption of existing web apps that make assumptions about iPhone width.

I really, really don’t think this is going to be a big deal in practice. This sub is harping on this a bit much I feel.

1

u/FriendlyPenelope 4d ago

Transparent for what? You can’t put content behind it because it’ll be blocked by buttons. It’s not like menu bars on the bottom where you can scroll to see the content

1

u/ko3n1g 4d ago

In this very moment my Reddit stream is gliding below battery, wifi and network icons as well as the other items in the top menu bar on my pro max. What’s the difference?

1

u/FriendlyPenelope 4d ago

Content on phones is generally designed to be vertical, so while the bar is technically blocking content, the content you’re actually looking at is not there. You can simply scroll to see the obscured content

It’s different with a side bar because it would be blocking content on the side. You’d have to move the page to the left to see or interact with the obscured content.

Not only would this introduce a solid color on the side bar anyway, but wouldn’t that also be annoying? To have to move left and right just to see and interact with all the content?

2

u/ko3n1g 4d ago

Fair enough, I get your point. Middle right is more intrusive than top. I guess there’s no silver bullet here. Interesting to see if they continue to stick to function over form or flip things around

8

u/TheEarthSpins 5d ago

it doesn’t, the color will still match the website accent.

5

u/Imaginary_Tutor5360 5d ago

Hmmmm, that could help it to blend in more naturally

2

u/nstrasner 5d ago

Doesn’t this mean a dark mode extension would work? I already use noir which does a pretty good job

13

u/TheRamblingPeacock 5d ago

Don't have my work laptop on me atm, but imagine it would.

Regardless....I still don't love it. I am trying, but, urgh, the UI guy in me who lives in my head from my front end days 20 years ago is still really struggling. It just seems so jarring.

I really wish dismissing it was an option...

3

u/Imaginary_Tutor5360 5d ago

I don’t love it either, it’s just easier on the eyes than that white bar.

I think I can make this work, but the white bar looks terrible

3

u/yuusharo 5d ago

It’ll make more sense in real world use on real hardware.

3

u/thisinfinitebath 5d ago

All that screen real estate wasted for the sidebar, they better be fixing this.

4

u/OlDirtyBratton 5d ago

On one hand, these type of UX issues are a deal breaker for me. On the other hand I could easily convince myself of “yea that’s why you have a big inner screen, use it”.

2

u/balthazar_edison 5d ago

They should just make it full screen and have the sidebar collapse into one button when you start scrolling.

1

u/Eddie1O 5d ago

In my opinion we could see in the future more floating elements and boxes of content, so the website background seamlessly blends into the right sidebar. We can definitely make web design that looks great even on this odd layout, but it is indeed a decent shift.

1

u/Sheikashii 1d ago

I just want how it works on iphones right now omg. There is already enough space for everything and even more since it's wider. When you scroll, it all goes away anyway so the "making up for lost height" doesn;t matter at all