wp-rocket
wp-rocket copied to clipboard
wp-media
Divi's Dynamic CSS feature can potentially break the layout when RUCSS is active
Before submitting an issue please check that you’ve completed the following steps:
- Made sure you’re on the latest version ✅
3.10.9 - Used the search feature to ensure that the bug hasn’t been reported before ✅
Describe the bug
Divi's Dynamic CSS feature (https://i.vgy.me/wFqnNA.jpg) will load a CSS file using JavaScript:
<script type="application/javascript">
(function() {
var file = ["https:\/\/www.example.com\/wp-content\/et-cache\/taxonomy\/product_cat\/2053\/et-divi-dynamic-late.css"];
var handle = document.getElementById('divi-style-parent-inline-inline-css');
var location = handle.parentNode;
if (0===document.querySelectorAll('link[href="' + file + '"]').length) {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.id = 'et-dynamic-late-css';
link.href = file;
location.insertBefore(link, handle.nextSibling);
}
})();
</script>
This may contain rules that override rules in the used CSS, thus breaking the layout.
In both cases I checked, the only solution was to disable Divi's feature.
To Reproduce
I'm trying to figure out when the specific files will be loaded on the front-end. I'll update this as soon as I find a way.
Expected behavior
The layout shouldn't break with Divi.
Additional context
Tickets: https://secure.helpscout.net/conversation/1788130755/326288 https://secure.helpscout.net/conversation/1794925397/327633
Backlog Grooming (for WP Media dev team use only)
- [ ] Reproduce the problem
- [ ] Identify the root cause
- [ ] Scope a solution
- [ ] Estimate the effort
On a site I checked, the font "Barlow" that was preserved in the used CSS and that should be used, was overridden by the one added from Divi's dynamic CSS feature: https://youtu.be/3zPqw5QTMYc
Although not breaking the site, the only solution was to disable the following Divi features:
Related ticket: https://secure.helpscout.net/conversation/1843557662/336737?folderId=2135277
Related ticket: https://secure.helpscout.net/conversation/1847376419/337388?folderId=2135277
I gave this further thought.
@piotrbak @mostafa-hisham Instead of disabling the features, I was wondering if it's possible to detect the et-divi-dynamic-late.css file and other dynamic CSS files that are injected by Divi, and use them during tree-shaking.
I'm not at all sure if it's even related, but we also got a layout bug if Divi's Dynamic CSS (4.17.1) & wp-rocket (3.11.0.5) is enabled: The product list will no longer show 3 per line, but in the pattern 3→1→2→2→1→3 on repeat. That's happened for months now, but doesn't with Divi 4.13 (unfortunately the only version I could rollback to).
Annoyingly, this doesn't occur immediately & can't be triggered at will – the pages look fine at first (in incognito & after cleaning WP-R's cache, ofc). Only when revisiting maybe 30min-1h later, the bug is there.
In our case the only semantic difference to the page (that is: I compared the ones as saved by Chrome's "Webpage, Complete") is that a et-divi-dynamic-tb-{#}-late(1).css file won't be loaded via a rel tag. Instead, its few rules will found at the end of et-divi-dynamic-tb-{#}.css, except for two missing @media {min-width:… ones that would be needed for the lists.
Related ticket: https://secure.helpscout.net/conversation/1862820678/339724?folderId=2135277
divi-style-inline-inline-css contained inline CSS that was overriding rules from the used CSS.
Related ticket: https://secure.helpscout.net/conversation/1862641888/339713/
Again, divi-style-inline-inline-css contained inline CSS that was overriding rules from the used CSS.
In all cases, disabling Divi Dynamic CSS solves the problem?
Yes, it does, in all cases I've checked.
The solution here will be to disable Divi's Dynamic CSS when our RUCSS is enabled.
Related ticket: https://secure.helpscout.net/conversation/1861235649/339324?folderId=2135277
Scope a solution
Divi theme provide us a filter to disactivate the functionnality. For that we have to return false as I did here:
add_filter( 'et_use_dynamic_css', function () {
return false;
} );
A solution would be to add a new method in the Divi thirdparty class disable_dynamic_css_on_rucss:
- that check if RUCSS is activated with
pre_get_rocket_option_remove_unused_cssfilter and bail out if it is. - apply the filter
et_use_dynamic_cssand return false.
Estimate effort
Effort XS
Related: https://secure.helpscout.net/conversation/1861916862/339496/
Related: https://secure.helpscout.net/conversation/1863027200/339767/
Related ticket: https://secure.helpscout.net/conversation/1910733609/346845/
In the case I checked (WP Rocket 3.11.3), disabling programmatically the dynamic CSS didn't resolve the issue. That was resolved only when I disabled the Dynamic CSS from Divi's options page.
In this case, a file was injected using JavaScript (https://snippi.com/s/bfm6xqd) and that overrode CSS rules in the used CSS.
The script is injected with Divi's ET_Dynamic_Assets::maybe_inject_late_dynamic_assets() method which is hooked to:
add_action( 'et_dynamic_late_assets_generated', array( $this, 'maybe_inject_late_dynamic_assets' ), 0 );
We should probably unhook that method as well when Remove Unused CSS is enabled.
Scope a solution
In the Divi thirdparty class we can add a new method remove_late_assets that is fired on the action after_setup_theme to make sure the theme is loaded and the callback already registered.
Inside this function we will have juste to remove the callback to the action with the following logic:
function remove_late_assets() {
remove_all_actions('et_dynamic_late_assets_generated');
}
Estimate effort
Effort XS
Still not working on 3.11.4+. I had to disable the feature manually for it to work. Ticket - https://secure.helpscout.net/conversation/1952347457/356586?folderId=3864735 @piotrbak this one might need reopening or re-running QA to make sure the dynamic style is always disabled.
@DahmaniAdame Thanks, please ping me if you're able to get the staging site 🙏
@piotrbak, the customer will make a staging site available after their next deployment. I will let you know whenever it's ready.
Related: https://secure.helpscout.net/conversation/1968608733/359854/
Related - https://secure.helpscout.net/conversation/2034796941/374306?folderId=3864735
In my case, disabling Load Dynamic Stylesheet in-line and Critical CSS on Divi's General > Performance tab fixed the issue.
I disabled the Dynamic CSS as well as a precaution.
related: https://secure.helpscout.net/conversation/2033444410/373982/
Divi's Dynamic CSS was not automatically disabled when RUCSS is active
Related - https://secure.helpscout.net/conversation/2040414379/375426/
Do we know the Divi version of the websites that have the issue?
the filter we currently use to disable the dynamic CSS option was added in the Divi theme @since 4.10.6
@joejoe04 @DahmaniAdame @alfonso100 @vmanthos
@piotrbak we can force disable the Divi options by changing the value in the options table
the code close to this
public function disable_dynamic_css_on_rucss() {
if ( ! $this->options->get( 'remove_unused_css', false ) ) {
return;
}
if ( defined( 'ET_BUILDER_PLUGIN_ACTIVE' ) ) {
$options = get_option( 'et_pb_builder_options', array() );
if ( isset( $options['performance_main_dynamic_css']) && $options['performance_main_dynamic_css'] === 'on' ) {
$options['performance_main_dynamic_css'] = 'off';
update_option( 'et_pb_builder_options', $options );
}
return;
}
if ( ! function_exists( 'et_update_option' ) ) {
return;
}
global $shortname;
et_update_option( $shortname . '_dynamic_css', 'off' );
et_update_option( $shortname . '_critical_css', 'off' );
et_update_option( $shortname . '_inline_stylesheet', 'off' );
}
@mostafa-hisham I don't recall Divi version on the cases I had. I will keep that in mind and check it on the next case if any.
I have one case where disabling both options caused a layout issue - #382963 Divi in this particular case had originally a broken layout when Dynamic and Critical CSS were turned off.
I have another case where Dynamic CSS is not disabled after RUCSS is active. https://secure.helpscout.net/conversation/2223729098/416250/
Divi Version: 4.20.4 WP Rocket 3.13.1
Maybe we can preserve inline CSS containing attr et-builder-module-design-tb?
@mostafa-hisham For RUCSS Inline Attrs Exclusions in the backend, is it possible to use wildcard (from the backend and plugin perspective)?