Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Possible issue: body classes don't work with Chrome on iOS. #6172

Closed
StealthWombat opened this issue Jun 30, 2020 · 4 comments
Closed

Possible issue: body classes don't work with Chrome on iOS. #6172

StealthWombat opened this issue Jun 30, 2020 · 4 comments
Labels
Theme
Milestone
2.1.0

Comments

@StealthWombat
Copy link

StealthWombat commented Jun 30, 2020 •
edited

Note: I have not tested this myself, due to not owning any iThingz. However, the person who tested it is not an idiot, so I think it's worth checking.

https://www.simplemachines.org/community/index.php?topic=573906.msg4061917#msg4061917

The short version is that when using the Chrome app on iOS, Chrome appears to override (or otherwise bork) code for assigning body tag classes via action/board/etc.

Safari on iOS is no problem. Body classes work as expected, and you can style elements by using the body class as a parent. Switch to Chrome: they stop working.

For the example in question the array for body classes was done using Sinan's old code (shown below) rather than the humungous ternary that 2.1 uses, but it does much the same thing.

	// Allow setting body tag class by action or board.
	$body_class = array();
	if (!empty($context['current_action']))
		$body_class[] = 'action_'. $context['current_action'];
	elseif (!empty($context['current_board']))
		$body_class[] = 'board_'. $context['current_board'];
	if (!empty($context['current_topic']))
		$body_class[] = 'action_display';
	if (!empty($context['max_menu_id']))
		$body_class[] = 'area_' . $context['menu_data_' . $context['max_menu_id']]['current_area'];
	if (!empty($context['current_subaction']))
		$body_class[] = 'subaction_' . $context['current_subaction'];
	if (empty($body_class))
		$body_class[] = 'action_index';

With the body tag itself simply being:

<body class="', implode(' ',$body_class), '">';

This CSS works with the above template code and with Safari on iOS, but doesn't work with Chrome on iOS.

.header {background: url(default_banner.png) center cover;}
.board_1 .header {
    background-image: url(board_1_lolcat.jpg);}
.board_4 .header {
    background-image: url(board_4_dancing_bananas.gif);}

Switch the code to assign the extra classes directly to the header, rather than to the body tag, and suddenly the extra classes work with Chrome on iOS (and still work with everything else).

(Note: Obviously, when putting the extra classes directly on the header in the markup, the CSS is changed to chain classes rather than use descendants. So .header.board_1 rather than .board_1 .header, but no other changes.)
@MissAllSunday MissAllSunday added this to the Final milestone Jul 25, 2020
@sbulen sbulen added the Theme label Jul 25, 2020
@StealthWombat
Copy link
Author

StealthWombat commented Oct 11, 2020 •
edited

Herself just got around to testing this on her iThing with Chrome:
https://www.simplemachines.org/community/index.php?topic=573906.msg4070616#msg4070616

Seems to work with iOS/Chrome if you put the classes on the html tag instead of the body tag. Fine with all other browsers too, as far as I know. Classing the html tag is actually a bit more versatile anyway, for no extra code, so not such a bad thing.

@MissAllSunday MissAllSunday modified the milestones: RC4, Final Mar 16, 2021
@MissAllSunday
Copy link
Contributor

Trimmed down RC issues, moved to Final.

@DiegoAndresCortes
Copy link
Contributor

DiegoAndresCortes commented Jul 25, 2021 •
edited

Can't reproduce anymore.
Tested on Chrome using an iPhone.

Screenshot_9

On this example I turned the background red using the body class for the board 1.
As you can see, using Chrome it displays the red background correctly.

@Sesquipedalian
Copy link
Member

It sounds like this was just some temporary bug in an old version of Chrome for iOS, rather than anything we need to worry about now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Theme
Projects
None yet
Milestone
2.1.0
Development

No branches or pull requests
5 participants
@Sesquipedalian @DiegoAndresCortes @MissAllSunday @StealthWombat @sbulen