I am writing to report critical issues affecting the functionality and rendering of the [Template Name] template (and associated SP Page Builder) on my Joomla 5.2.3 site. Despite following best practices (PHP 8.3, LiteSpeed, and modern optimization tools), the template generates numerous CSS/HTML validation errors, causing broken layouts in Firefox/Safari and performance degradation. Below is a detailed technical summary for resolution:
Template: Fusion https://www.joomshaper.com/downloads/template/fusion
- Major Issues Identified
A) CSS Validation Errors
Obsolete Vendor Prefixes:
-moz-transition, -ms-viewport, -moz-osx-font-smoothing, and other deprecated prefixes are still used in sppagebuilder.css, template.css, and bootstrap.min.css. These are unsupported in modern browsers and trigger console warnings.
Example: -moz-transition: all 0.3s; / Replace with standard 'transition' /
Invalid Syntax:
Typos like background-color; (with a semicolon) and invalid values like border-color: #0037DDpx; (incorrect px suffix).
Example Fix: background-color: #0037DD;
border-color: #0037DD;
Unrecognized Properties:
Deprecated properties like speak: none; (in style.css and joomla-fontawesome.min.css).
B) HTML Validation Errors
Duplicate IDs:
Repeated IDs like id="a" (linearGradient), id="offcanvas-toggler", and id="nav-menu" break ARIA compliance and DOM integrity.
Invalid Element Placement:
<style> tags nested inside <div> elements (non-standard placement, blocked by browsers).
Example: <div>
<style>/ CSS here /</style> <!-- Invalid -->
</div>
Malformed Attributes:
height='56px' on <img> tags (should be unitless: height="56").
Incorrect role values (e.g., role="HELIX_ULTIMATE_AIRA_NAVIGATION").
C) Bootstrap Compatibility Issues
Outdated Selectors:
Use of deprecated Bootstrap 3/4 syntax like :-moz-placeholder-shown (no longer valid in Bootstrap 5).
D) Google Fonts Loading Errors
Spaces in URL Parameters:
Broken font links due to unescaped spaces (e.g., family=Ubuntu Mono → should be family=Ubuntu+Mono).
- Impact on the Site
Cross-Browser Rendering Issues:
Layouts break in Firefox/Safari due to CSS errors (Chrome ignores some non-critical errors).
Console warnings block JS/CSS execution, causing elements like menus, buttons, and animations to fail.
Performance Overhead:
Redundant prefixed properties increase CSS file size, delaying page loads.
SEO and Accessibility Risks:
Duplicate IDs and invalid HTML harm SEO rankings and screen reader compatibility.
- Steps to Reproduce
Install the latest version of [Template Name] and SP Page Builder on Joomla 5.
Run the site through the W3C Validator or check browser consoles (Firefox/Safari).
Observe 150+ errors in CSS/HTML files (attached for reference).
- Requested Fixes
Template/SP Page Builder Update:
Remove all obsolete vendor prefixes and deprecated CSS properties.
Ensure Bootstrap 5 compatibility (Joomla 5’s requirement).
Fix Google Fonts URL encoding and HTML5 validation errors.
Code Quality Improvements:
Avoid inline <style> tags inside <div> elements.
Use unique IDs and valid ARIA roles.
Documentation:
Provide guidance on migrating from legacy code to modern standards.
- Additional Notes
Current Setup:
Joomla 5.2.3 | PHP 8.3 | LiteSpeed | MySQL 8.0.37
Affected Files: sppagebuilder.css, template.css, bootstrap.min.css, and multiple template overrides.
Temporary Workaround:
Switching to Joomla’s default template (Cassiopeia) resolves all errors, confirming the issue is template-related.
Urgency: High. These issues severely impact site usability and professionalism. As a paying customer, I expect a resolution within the next 7 business days or a timeline for an updated template version.
Please acknowledge receipt and provide an action plan.
